<template>
  <div class="item">
    <div v-if="getList.length != 0">
      <div v-for="(v, index) in getList" :key="index" class="list">
        <img :src="v.avaUrl" alt="" />
        <div class="content">
          <span class="font">{{ v.name }}</span
          ><br />
          <span class="color">{{ v.phone }}</span>
        </div>
        <div class="wrap">
          <button @click="minus(v)" class="b1">-</button>
          <input
            type="text"
            name=""
            id=""
            v-model.number="v.count"
            @change="change(v)"
          />
          <button @click="add(v)" class="b2">+</button>
        </div>
      </div>
    </div>

    <div v-if="getList.length == 0">
      <h3 style="color: red">购物车里什么也没有</h3>
    </div>
    <p class="f1">
      共有<span class="num">{{ getAllCount }}</span
      >件商品
    </p>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
export default {
  name: "Cart",
  data() {
    return {};
  },
  methods: {
    // 加法
    add(v) {
      this.$store.commit("add", v);
    },
    // 减法
    minus(v) {
      if (v.count <= 1) {
        MessageBox.confirm("是否确定删除?")
          .then((action) => {
            this.$store.commit("minus", v);
          })
          .catch((e) => {});
      } else {
        this.$store.commit("minus", v);
      }
    },
    //
    change(v) {
      if (v.count > 200) {
        v.count = 200;
        this.$store.commit("change", v.count);
      }
    },
  },
  // 计算属性
  computed: {
    getList() {
      return this.$store.state.list;
    },
    getAllCount() {
      return this.$store.getters.allCount;
    },
  },
};
</script>
<style scoped>
input {
  width: 40%;
  font: initial;
  font-size: 13px;
  font-weight: bolder;
  text-align: center;
  border: none;
  background: #efefef;
}
button {
  width: 23%;
  opacity: 0.5;
  font: initial;
  font-size: 18px;
  border: none;
  color: black;
  font-weight: bolder;
  background: #fff;
}
span {
  font-size: 14px;
}
.item {
  margin-top: 50px;
  margin-bottom: 60px;
}
.list {
  position: relative;
  background: #fff;
  box-shadow: 2px 2px 10px #ccc;
  border-radius: 0.5rem;
}
.list img {
  position: absolute;
  top: 6px;
  height: 80%;
  left: 10px;
  border-radius: 0.5rem;
}
.content {
  line-height: 35px;
  margin-left: 120px;
  margin-top: 10px;
  text-align: left;
}
.font {
  display: inline-block;
  margin-top: 10px;
}
.wrap {
  margin-left: 280px;
  line-height: 30px;
}
.b1 {
  margin-right: -5px;
}
.b2 {
  margin-left: -5px;
}
.num {
  color: wheat;
  background-color: brown;
  font-size: 40px;
   border-radius: 50%;
}
</style>
